<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>商品推广后台</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link th:href="@{/assets/plugins/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/datatables/buttons.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>

    <link th:href="@{/assets/plugins/datatables/responsive.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">
</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">

        <div class="page-container pl-0">
            <div class="main-content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header border-bottom">
                                    <h4 class="card-title">商品列表</h4>
                                    <a th:href="@{/admin/product/goodsInfo}" class="float-right">
                                        <button type="button" class="btn btn-outline-dark">添加新商品</button>
                                    </a>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="datatable" class="table table-bordered" style="width: 100%;">
                                            <thead>
                                            <tr>
                                                <th>商品编号</th>
                                                <th>商品名称</th>
                                                <th class="text-center">商品状态</th>
                                                <th class="text-center">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <!--<tr th:each="product:${products}">
                                                <th scope="row" th:text="${product.id}"></th>
                                                <td th:text="${product.name}"></td>
                                                <td th:switch="${product.isEffect}" class="text-center">
                                                    <span th:case="'0'">未上架</span>
                                                    <span th:case="'1'">售卖中</span>
                                                    <span th:case="'2'">已下架</span>
                                                </td>
                                                <td th:switch="${product.isEffect}" class="text-center">
                                                    <a th:href="@{/admin/product/sellOrSold(type=0,id=${product.id})}"
                                                       th:case="'0'">
                                                        <button type="button" class="btn btn-outline-success">上架
                                                        </button>
                                                    </a>
                                                    <a th:href="@{/admin/product/sellOrSold(type=1,id=${product.id})}"
                                                       th:case="'1'">
                                                        <button type="button" class="btn btn-outline-danger">下架</button>
                                                    </a>
                                                    <a th:href="@{/admin/product/sellOrSold(type=0,id=${product.id})}"
                                                       th:case="'2'">
                                                        <button type="button" class="btn btn-outline-success">上架
                                                        </button>
                                                    </a>
                                                    <a th:href="@{/admin/product/goodsInfo(id=${product.id})}"
                                                       th:if="${product.isEffect} != '1'">
                                                        <button type="button" class="btn btn-outline-info">修改</button>
                                                    </a>
                                                </td>
                                            </tr>-->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>


<script th:src="@{/assets/js/jquery-min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/dataTables.bootstrap4.min.js}"></script>

<script th:src="@{/assets/plugins/datatables/dataTables.buttons.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/jszip.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/pdfmake.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/vfs_fonts.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.html5.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.print.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.colVis.min.js}"></script>

<script th:src="@{/assets/plugins/datatables/dataTables.responsive.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/responsive.bootstrap4.min.js}"></script>

<script th:src="@{/assets/js/datatables.init.js}"></script>

<script type="text/javascript">
    $("#datatable").DataTable({
        "oLanguage": {
            "sUrl": "/assets/page_zh_CN.json"
        },
        serverSide: true, //开启后端模式
        // searching: false,  //禁用原生搜索
        // "pageLength": 10,         //初始化显示几条数据
        "sAjaxSource": "/admin/product/pageTable",
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": {
                    aoData: JSON.stringify(aoData)
                },
                "success": fnCallback
            });
        },
        "bDeferRender": true,// 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。默认值：False
        //列表表头字段
        "aoColumns": [
            {"mData": "productID","width":"25%"},
            {"mData": "productName","width":"25%","orderable" : false},
            {"mData": "productStatus","width":"25%","orderable" : false},
            {"mData": "productOperate"}
        ],
        "aoColumnDefs": [
            {
                "sClass": "text-center",
                "aTargets": [3],
                "width":"25%",
                "orderable" : false,
                "mData": "productOperate",
                "mRender": function (a, b, c, d) {//a表示productOperate对应的值，c表示当前记录行对象；product对象，b display ； d 当前行 当前列
                    $("#datatable tbody tr:eq("+d.row+")").attr("role","none");
                    var html = '';
                    if (a == 0 || a ==2){
                        html += '<a href="/admin/product/sellOrSold?type=0&id='+c.productID+'" >' +
                            '<button type="button" class="btn btn-outline-success">上架</button>' +
                            '</a>\n' +
                            '<a href="/admin/product/goodsInfo?id='+c.productID+'" >' +
                            '<button type="button" class="btn btn-outline-info">修改</button>' +
                            '</a>';
                    } else if (a == 1) {
                        html += '<a href="/admin/product/sellOrSold?type=1&id='+c.productID+'" >' +
                            '<button type="button" class="btn btn-outline-danger">下架</button>' +
                            '</a>';
                    }
                    return html;
                }
            },
            {
                "sClass": "text-center",
                "aTargets": [2],
                "mData": "productStatus"
            }/*,{
                "aTargets": [0],
                "mData": "productID"
            },
            {
                "aTargets": [1],
                "mData": "productName"
            }*/
        ],
        "fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
            if (aData["productStatus"] == 0) {
                $('td:eq(2)', nRow).html("<span>未上架</span>");
            } else if (aData["productStatus"] == 1) {
                $('td:eq(2)', nRow).html("<span>售卖中</span>");
            } else if (aData["productStatus"] == 2) {
                $('td:eq(2)', nRow).html("<span>已下架</span>");
            }
        }
    });
</script>
</body>

</html>